/**
 * 系统管理  医生管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>医生管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true"  class="user-search">

      <el-form-item label="搜索：">
        <el-input size="small" v-model="category.doctorName" placeholder="输入医生名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit1()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData.slice((pageNum - 1) * pageSize, pageNum * pageSize)" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="doctorName" label="医生名称" width="80px" >
      </el-table-column>
      <el-table-column align="center" sortable prop="doctor_variety" label="医生类别" width="100px" >
        <template slot-scope="scope">
          <span v-if="scope.row.doctorVariety ==0">兽医</span>
          <span v-if="scope.row.doctorVariety ==1">农医</span>
        </template>
      </el-table-column>
      <el-table-column sortable prop="excel" label="擅长主治" >
      </el-table-column>
      <el-table-column sortable prop="profile" label="个人简介" >
      </el-table-column>
      <el-table-column sortable prop="hospitalName" label="医院" >
      </el-table-column>
      <el-table-column sortable prop="browse" label="浏览量" width="80px">
      </el-table-column>
      <el-table-column sortable prop="create_time" label="创建时间" >
        <template slot-scope="scope">
          <div>{{scope.row.createTime|timestampToTime}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="doctorEmail" label="邮件" >
      </el-table-column>
      <el-table-column align="center" label="操作" >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
          <el-button size="mini" @click="List(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 3, 4, 5, listData.length]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="listData.length"
    >
    </el-pagination>
    <!-- 编辑界面 -->
    <el-dialog title="修改" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="医生民称" prop="varName">
          <el-input size="small" v-model="editForm.doctorName" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="医生类别" prop="varValue">
          <el-select v-model="editForm.doctorVariety" >
            <el-option label="兽医" value="0"></el-option>
            <el-option label="农医" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="擅长主治" prop="varValue">
          <el-input size="small" v-model="editForm.excel" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="个人简介" prop="varValue">
          <el-input size="small" v-model="editForm.profile" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="医院" prop="varValue">
          <el-select v-model="editForm.hospitalId" placeholder="请选择">
            <el-option
              v-for="item in option"
              :key="item.hospitalId"
              :label="item.hospitalName"
              :value="item.hospitalId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="varValue">
          <el-input size="small" v-model="editForm.doctorEmail" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="医生头像" prop="categoryImg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8099/oss/upload"
            field="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :key="imagecropperKey"
            :before-upload="beforeAvatarUpload">
            <img v-if="editForm.doctorPto" :src="editForm.doctorPto" v-model="editForm.doctorPto" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>

    <!-- 添加界面 -->
    <el-dialog title="添加" :visible.sync="editFormVisible1" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="addForm" :rules="rules" ref="editForm">
        <el-form-item label="医生民称" prop="varName">
          <el-input size="small" v-model="addForm.doctorName" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="医生类别" prop="varValue">
          <el-select v-model="addForm.doctorVariety" >
            <el-option label="兽医" value="0"></el-option>
            <el-option label="农医" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="擅长主治" prop="varValue">
          <el-input size="small" v-model="addForm.excel" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="个人简介" prop="varValue">
          <el-input size="small" v-model="addForm.profile" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="varValue">
          <el-input size="small" v-model="addForm.doctorCode" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="varValue">
          <el-input size="small" v-model="addForm.passWord" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="医院" prop="varValue">
          <el-select v-model="addForm.hospitalId" placeholder="请选择">
            <el-option
              v-for="item in option"
              :key="item.hospitalId"
              :label="item.hospitalName"
              :value="item.hospitalId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="varValue">
          <el-input size="small" v-model="addForm.doctorEmail" auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="医生头像" prop="categoryImg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8099/oss/upload"
            field="file"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="this.doctorPto" :src="this.doctorPto" v-model="addForm.doctorPto" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm1()">保存</el-button>
      </div>
    </el-dialog>
    <!-- 查看界面 -->
    <el-dialog title="添加" :visible.sync="editFormVisible2" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="list" :rules="rules" ref="editForm">
        <el-form-item label="医生民称" prop="varName">
          <el-input size="small" v-model="list.doctorName" disabled auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="医生类别" prop="varValue">
          <el-select v-model="list.doctorVariety" disabled >
            <el-option label="兽医" value="0"></el-option>
            <el-option label="农医" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="擅长主治" prop="varValue">
          <el-input size="small" v-model="list.excel" disabled auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="个人简介" prop="varValue">
          <el-input size="small" v-model="list.profile" disabled auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="varValue">
          <el-input size="small" v-model="list.doctorCode" disabled  auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="varValue">
          <el-input size="small" v-model="list.passWord" disabled auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="医院" prop="varValue">
          <el-select v-model="list.hospitalId" placeholder="请选择" disabled>
            <el-option
              v-for="item in option"
              :key="item.hospitalId"
              :label="item.hospitalName"
              :value="item.hospitalId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="varValue">
          <el-input size="small" v-model="list.doctorEmail" disabled auto-complete="off" placeholder="变量名称"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="varValue">
          <img  :src="list.doctorPto"  class="avatar">
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {
    hospList,
    doctorList,
    doctorSave,
    doctorDelete, doctorEdit,
  } from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      imagecropperKey:0,
      pageNum: 1,
      pageSize: 2,
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      editFormVisible1: false, //控制编辑页面显示与隐藏
      editFormVisible2: false, //控制编辑页面显示与隐藏
      title: '添加',
      editForm: {
        doctorId: '',
        doctorName: '',
        doctorVariety: '',
        excel: '',
        profile: '',
        hospitalId: '',
        doctorPto: '',
        doctorEmail: '',
      },
      addForm: {
        doctorName: '',
        doctorVariety: '',
        excel: '',
        profile: '',
        hospitalId: '',
        doctorPto: '',
        doctorEmail: '',
        doctorCode: '',
        passWord: '',
      },
      list: {
        doctorName: '',
        doctorVariety: '',
        excel: '',
        profile: '',
        hospitalId: '',
        doctorPto: '',
        doctorEmail: '',
        doctorCode: '',
        passWord: '',
      },
      doctorPto: '',
      // rules表单验证
      rules: {
        doctor_id: [
          { required: true, message: '请输入变量描述', trigger: 'blur' }
        ],
        doctor_name: [
          { required: true, message: '请输入变量名称', trigger: 'blur' }
        ],
        doctor_variety: [
          { required: true, message: '请输入变量名称', trigger: 'blur' }
        ],
        excel: [
          { required: true, message: '请输入变量名称', trigger: 'blur' }
        ] ,
        profile: [
          { required: true, message: '请输入变量名称', trigger: 'blur' }
        ] ,
        hospital_id: [
          { required: true, message: '请输入变量名称', trigger: 'blur' }
        ] ,
        doctor_email: [
          { required: true, message: '请输入变量名称', trigger: 'blur' }
        ]
      },
      category:{},
      listData:[],
      option:[]
    }
  },

  // 注册组件
  components: {
    Pagination
  },
  created() {
    //全查医生
    this.search()
  },

  /**
   * 里面的方法只有被调用才会执行
   */

  methods: {
    //图片上传
    handleAvatarSuccess(res) {
      console.log(res.data.url)
      this.doctorPto = res.data.url
      this.addForm.doctorPto =res.data.url
      this.editForm.doctorPto =res.data.url
      this.imagecropperKey =this.imagecropperKey+1
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isGIF = file.type === 'image/gif';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    //分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
    },
    // 搜索事件
    search() {
      doctorList(this.category).then(res => {
        this.loading = false
        this.listData = res.data.data.list
        console.log(this.listData)
      })
        .catch(err => {
          this.loading = false
          this.$message.error('医生信息加载失败，请稍后再试！')
        })
    },
    //显示编辑界面
    handleEdit(row) {
      hospList().then(res => {
        this.option = res.data.data.list
      })
      this.editFormVisible = true
        this.title = '修改'
        this.editForm = {...row };

    },
    //显示添加界面
    handleEdit1() {
      hospList().then(res => {
        this.option = res.data.data.list
      })
      this.editFormVisible1 = true
        this.title = '添加'
    },
    // 编辑页面保存方法
    submitForm() {
          this.$confirm('是否修改此医生?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'}).then(() => {
            doctorEdit(this.editForm).then(res => {
              if (res.code == 20000) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              }
              this.search()
              this.editFormVisible = false
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改',
            });
            this.editFormVisible = false
          });
        },
    // 增加页面保存方法
    submitForm1() {
          this.$confirm('是否添加此医生?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'}).then(() => {
            doctorSave(this.addForm).then(res => {
              if (res.code == 20000) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
              }
              this.search()
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消添加',
            });
            this.editFormVisible1 = false
            this.addForm={}
          });
    },
    // 删除权限
    deleteUser(row) {
      this.$confirm('是否删除此医生?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'}).then(() => {
        doctorDelete(row.doctorId).then(res => {
          if (res.code == 20000) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.search()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
        this.editFormVisible = false
      });
    },
    List(row){
      hospList().then(res => {
        this.option = res.data.data.list
      })
      this.editFormVisible2 = true
      this.list={...row}
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
      this.editFormVisible1 = false
      this.editFormVisible2 = false
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 30px ;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 110px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

